<template>
  <div class="main">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first">
        <el-card shadow="always">
          <div class="button-container">
            <el-button type="primary" icon="el-icon-plus" plain @click="adduser">添加用户</el-button>
          </div>
          <el-table
              :data="userList"
              style="width: 100%">
            <el-table-column
                label="id"
                prop="uid"
                align="center"/>
            <el-table-column
                label="姓名"
                prop="account"
                align="center"/>
            <el-table-column
                label="密码"
                prop="password"
                align="center"/>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="订单管理" name="second">
        <el-card shadow="always">
          <div class="button-container">
            <el-button type="primary" icon="el-icon-plus"  plain @click="addOrder">添加订单</el-button>
          </div>
          <el-table
              :data="orderList"
              style="width: 100%">
            <el-table-column
                label="订单id"
                prop="oid"
                align="center"/>
            <el-table-column
                label="用户id"
                prop="uid"
                align="center"/>
            <el-table-column
                label="备注"
                prop="remark"
                align="center"/>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleOrderEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDeleteOrder(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :title='title' :visible.sync="dialogFormVisible">
      <el-form :model="user" :rules="rules" ref="ruleForm">
        <el-form-item label="账号" prop="account" >
          <el-input v-model="user.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="user.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog :title='title' :visible.sync="dialogOrderFormVisible">
      <el-form :model="order">
        <el-form-item label="用户id" prop="account" :label-width="formLabelWidth">
          <el-select v-model="order.uid" placeholder="用户id">
            <el-option :label="c.name" :value="c.uid" v-for="c in userList" :key="c.uid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="password">
          <el-input v-model="order.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogOrderFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrder">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import userApi from "@/api/user";
import orderApi from "@/api/order";

export default {
  data() {
    var validateAccount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'));
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      }
    };
    return {
      activeName: 'first',
      userList: [],
      orderList:[],
      user:{},//添加或修改用户的对象
      order:{},//添加或修改订单的对象
      dialogOrderFormVisible: false,
      dialogFormVisible: false,
      title: '添加',
      rules: {
        account: [
          { validator: validateAccount, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
      }
    };
  },
  created() {
    this.findAllUser();
    this.findAllOrder();
  },
  methods: {
    async findAllOrder(){
      try {
        const response = await orderApi.findAllOrder();
        const { data } = response;
        if (data.code === 200) {
          this.orderList = data.data;
        } else {
          this.$message.error(data.message);
        }
      } catch (error) {
        console.error(error);
        this.$message.error('请求失败: ' + error.message);
      }
    },
    async findAllUser() {
      try {
        const response = await userApi.findAllUser();
        const { data } = response;
        if (data.code === 200) {
          this.userList = data.data;
        } else {
          this.$message.error(data.message);
        }
      } catch (error) {
        console.error(error);
        this.$message.error('请求失败: ' + error.message);
      }
    },

    async save(){
      let url = "/user/add"
      let method = "post"
      if (this.user.uid){
         url = "/user/update"
         method = "put"
      }
      const response = await userApi.save(url,method,this.user);
      const { data } = response;
      if(data.code === 200){
        this.dialogFormVisible = false
        this.findAllUser()
      }
    },
    async saveOrder(){
      let url = "/user/tOrder/add"
      let method = "post"
      if (this.order.oid){
        url = "/user/tOrder/update"
        method = "put"
      }
      const response = await orderApi.save(url,method,this.order);
      const { data } = response;
      if(data.code === 200){
        this.dialogOrderFormVisible = false
        this.findAllOrder()
      }
    },
    addOrder(){
      this.title = "添加订单"
      this.order = {}
      this.dialogOrderFormVisible = true;
    },
    adduser(){
      this.title = "添加用户"
      this.user = {}
      this.dialogFormVisible = true;
    },
    //编辑按钮，修改学生
    handleEdit(index, row) {
      this.title = '修改用户'
      this.user = row
      this.dialogFormVisible = true    //打开对话框
    },
    handleOrderEdit(index, row) {
      this.title = '修改订单'
      this.order = row
      this.dialogOrderFormVisible = true    //打开对话框
    },
    async handleDelete(index,row){
      const response = await userApi.delete(row.uid)
      const { data } = response;
      if (data.code === 200){
        this.findAllUser()
      }
    },
    async handleDeleteOrder(index,row){
      const response = await orderApi.delete(row.oid)
      const { data } = response;
      if (data.code === 200){
        this.findAllOrder()
      }
    }
  }
}
</script>
<style>
#main{
  display: flex;
  justify-content: center;
}

.el-card{
  margin: auto;
  width: 100%;
}
.el-pagination{
  margin-top: 10px;
  text-align: right;
}
.button-container {
  display: flex;
  justify-content: flex-start; /* 将按钮定位到左边 */
  margin-bottom: 10px; /* 添加一些底部间距 */
}
</style>